<html>

<head>
    <style>
        .fade-enter-active {
            transition: all .3s ease;
        }

        .fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .fade-enter,
        .fade-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
    </style>
    <script src="./libs/dat.gui.js"> </script>
    <script src="https://unpkg.com/vue"></script>

    <div id="app">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
</head>

<body>
    <script>
        var gui = new dat.GUI();
        gui.open();

        var app = new Vue({
            el: '#app',
            data: {
                todos: [
                    { text: '学习 JavaScript' },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ],
            }
        });

        var folder = gui.addFolder('App');
        folder.open();
        Object.keys(app.$data.todos).forEach((key) => {
            var todo = app.$data.todos[key];
            folder.add(todo, 'text').listen();
        });
    </script>
</body>

</html>